<template>
	<view class="container">
		<view class="title-box m-t-26">
			{{title}}
		</view>
		<u--form :model="form" ref="uForm">
			<u-form-item label="汇报时间:" prop="name" labelWidth="75">
				<view class="">
					{{$formatTime(detail_data.ctime,'YYYY-MM-DD')}}
				</view>
			</u-form-item>
			<u-form-item label="完成情况:" prop="name" labelWidth="75">
				<view class="">
					{{detail_data.completionStatusText}}
				</view>
			</u-form-item>
			<u-form-item label="汇报给:" prop="name" labelWidth="75">
				<view class="d-flex hbr-box">
					<view class="hbr-item" v-for="item in detail_data.reportTargetUser">
						{{item.nickName}}
					</view>
				</view>
			</u-form-item>
			<u-form-item label="汇报内容" prop="name" labelWidth="160" labelPosition="top">

				<view class="m-t-10 width-100 d-flex a-item-c">
					<u-textarea v-model="detail_data.content" type="text" disabled />
					<!-- <text class="m-l-10">{{currentUnit(detail_data.content)}}</text> -->
				</view>
			</u-form-item>
			<u-form-item label="沟通方式:" prop="name" labelWidth="75">
				<view class="">
					{{detail_data.wayText}}
				</view>
			</u-form-item>
			<u-form-item label="凭证" prop="name" labelWidth="160" labelPosition="top">
				<view class="m-t-10 width-100">
					<!-- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10" width="160" height="160"></u-upload> -->
					<u-album :urls="imgArr" singleSize="100"></u-album>

				</view>
			</u-form-item>

			<u-form-item label="审批状态:" prop="name" labelWidth="75">
				<view class="">
					{{getApprovalResult[detail_data.status]}}
				</view>

			</u-form-item>
			<u-form-item label="审批意见" prop="name" labelWidth="160" labelPosition="top"
				v-if="detail_data.leadershipCommentsEnhanced">
				<view class="m-t-10 width-100" v-for="item in detail_data.leadershipCommentsEnhanced">
					<view class="">
						{{item.nickname}}：{{item.content}}
					</view>
				</view>
			</u-form-item>
		</u--form>
		<view class="btn-box" v-if="detail_data.status == 0 || detail_data.status == 2">
			<u-button @click="update" class="btn-submit-2">修改</u-button>
		</view>

		<view class="share_box" @click="openShareModal">
			<u-icon name="share" size="24" color="#ffffff"></u-icon>
		</view>
		<!-- 分享弹窗 -->
		<share-modal ref="shareModal" :share-config="shareConfig" @close="onShareClose"
			@result="onShareResult"></share-modal>
	</view>
</template>

<script>
	import {
		getCurrentUnit,
		ApprovalResult
	} from '@/common/dataList.js'
	import {
		selectTasksHbOne,
		selectPerformanceLeadership
	} from '@/common/api/renwu.js'
	import {
		http,
		API_BASE_URL
	} from '@/common/http.js';
	import ShareModal from '../../share/components/share-modal/share-modal.vue';
	export default {
		components: {
			ShareModal
		},
		data() {
			return {
				type: 1, //0 业绩  1 任务 区分跳转页面
				id: '',
				form: {
					name: '',
				},
				imgArr: [],
				detail_data: {
					evidence: '',
				},
				leader: [],
				title:'',
				// 分享配置
				shareConfig: {
					title: '',
					rw_content: '',
					bgColor: '#ffffff',
					shareUrl: window.location.href // H5环境下的分享链接
				}
			};
		},
		computed: {
			// 定义计算属性，暴露 getCurrentUnit 方法
			currentUnit() {
				return getCurrentUnit;
			},
			getApprovalResult() {
				return ApprovalResult
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			this.id = options.id
			this.title = options.title
			if (options.type) this.type = options.type
			this.getData()

		},
		watch: {

		},
		methods: {
			getData() {
				try {
					selectTasksHbOne({
						id: this.id
					}).then((res) => {
						console.log(res, '---------')
						this.detail_data = res.data
						this.imgArr = this.imgUrl(res.data.url)
						// this.getLeader(res.data.leadershipId)

						this.shareConfig.title = this.title
						this.shareConfig.rw_content = `${res.data.content}`
					})
				} catch (error) {
					//TODO handle the exception
				}
			},
			// 修改
			update() {

				uni.navigateBack({
					delta: 2,
					complete: () => {
						setTimeout(() => {
							uni.navigateTo({
								url: `/homeNav/rwgl/yjhb/yjhb?id=${this.id}&type=${this.type}`
							})
						}, 100)
					},
				})
			},
			// 图片路径
			imgUrl(img) {
				let imgarr = img.split(',');
				console.log(imgarr, '---imgarr')
				return imgarr
			},
			// 查领导
			getLeader(leader) {
				console.log(leader, '-------------leader')
				let params = {
					leadershipId: leader
				}
				selectPerformanceLeadership(params).then(res => {
					console.log(res, '-------------')
					this.leader = res.data
				})
			},
			/**
			 * 打开分享弹窗
			 */
			openShareModal() {
				this.$refs.shareModal.open();
			},

			/**
			 * 分享弹窗关闭回调
			 */
			onShareClose() {
				console.log('分享弹窗已关闭');
			},

			/**
			 * 分享结果回调
			 */
			onShareResult(result) {
				console.log('分享结果:', result);

				// 在H5环境下，除了分享弹窗的提示外，再显示一个toast提示
				if (!isWeComEnv()) {
					showToast(result.success ? '操作成功' : '操作失败', result.success ? 'success' : 'error');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 92%;
		margin: 0 4%;
	}

	.hbr-box {
		gap: 16rpx;
		flex-flow: wrap;
	}

	.hbr-item {
		border: 1rpx solid #2585f5;
		background-color: rgb(229, 241, 245);
		border-radius: 8rpx;
		padding: 4rpx 8rpx;
		box-sizing: border-box;
	}

	.title-box {
		font-size: 32rpx;
		font-weight: 500;
	}

	.btn-submit {
		width: 60%;
		margin: 100rpx 20% 40rpx;
		background-color: #2585f5;
		color: #fff;
		border-radius: 12rpx;
	}

	.btn-box {
		// width: 100%;
		// position: fixed;
		// bottom: 10%;
		// left: 0;
		margin: 50rpx 0;
	}

	.btn-submit-2 {
		width: 40%;
		margin: 0 30%;
		// background-color: #2585f5;
		// color: #fff;
		border-radius: 12rpx;
	}

	.buttomboxs {
		width: 100%;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		z-index: 100;
		bottom: 0;
		border-top: 1px solid #fff7f6;
		padding: 20rpx 0;
		padding-bottom: constant(safe-area-inset-bottom);
		/* iOS 11.2+ 支持 env()，优先级更高 */
		padding-bottom: env(safe-area-inset-bottom);

		.butnavbox {
			width: 33.3%;

			.navimgs {
				width: 40rpx;
				height: 40rpx;
				margin: 0 auto;
				display: block;
				background-color: #ff5733;
				padding: 10rpx;
				border-radius: 15rpx;
			}

			.navtxt {
				text-align: center;
				font-size: 26rpx;
				margin-top: 10rpx;
				padding-bottom: 15rpx;
			}
		}
	}

	::v-deep .u-input,
	::v-deep .u-textarea {
		background: none !important;
	}

	.share_box {
		position: fixed;
		bottom: 5%;
		right: 2%;
		border-radius: 50%;
		background-color: #d81e06;
		padding: 24rpx;
	}
</style>
<style>
	page {
		background-color: #fff;
	}
</style>